<template>
  <div>
    <ComHeader title="导入结果" leftArrow="true" v-if="uploadBox"/>
    <div class="result-box flex-display flex-display-column flex-center-pack">
      <div class="fileName">{{file_name}}</div>
      <img :src="c_img">
      <div class="re-box flex-display flex-center-align flex-center-pack">
        <span class="re-box__tit flex-num-one space-text">{{sysAppIds}}</span>
        <span class="re-box-copy" v-clipboard:copy="sysAppIds" v-clipboard:success="onCopy">点击复制</span>
      </div>
      <div class="btn-bxo flex-display">
        <span class="flex-num-one" @click="fnBatchExportFn">追加数据</span>
        <span class="flex-num-one" @click="fnGoCourier">去查快递</span>
      </div>
      <p class="text-gray">扫一扫上面的二维码图案，用手机访问</p>
    </div>
    <input type="file" style="display:none;" ref="export" @change="exportExcelFn();">
  </div>
</template>
<script>
import axios from "axios";
import ComHeader from "@/common/ComHeader";

import { Toast, MessageBox, Indicator } from "mint-ui";
export default {
  data() {
    return {
      uploadBox: true, // 是否显示头部
      file_name: "", // 文件名称
      sysAppIds: `qianduan.sailafeinav.com/courier?file_id=${
        this.$route.query.url
      }&QR_code=${this.$route.query.QR_code}` // 二维码图片地址
    };
  },
  created() {
    // 设置微信分享内容
    // let wxShareOpt = {
    //   title: this.$route.query.file_name,
    //   desc: "塞拉菲娜查询系统，一款永久免费的一键智能查询系统",
    //   link: window.location.href.split("#")[0],
    //   img: `${this.courierUrl}/${this.$route.query.QR_code}`
    // };
    // this.wxShare(wxShareOpt);
  },
  mounted() {
    // 获取文件名称
    this.file_name = this.$route.query.file_name;
    // 判断当前宽度是否大于700
    this.uploadBox = document.documentElement.clientWidth > 700 ? false : true;
  },
  methods: {
    // 跳转查询快递
    fnGoCourier() {
      this.$router.push(
        "/courier?file_id=" +
          this.$route.query.url +
          "&QR_code=" +
          this.$route.query.QR_code +
          "&file_name=" +
          this.file_name
      );
    },

    // 点击复制内容
    onCopy() {
      Toast({
        message: "复制成功",
        duration: 1000
      });
    },

    // 追加数据，只能再PC端打开追加数据
    fnBatchExportFn() {
      if (this.uploadBox) {
        MessageBox.confirm("", {
          message: `如果手机端上传不了文件，请到电脑端进行上传`,
          title: "提示",
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(action => {
            this.$refs.export.click();
          })
          .catch(err => {});
      } else {
        this.$refs.export.click();
      }
    },

    // 上传文件
    exportExcelFn() {
      let file = event.target.files[0];
      let fileSize = event.target.files[0].size;
      let size = fileSize / 1024;
      console.log(size);
      if (size > 1000) {
        Toast({
          message: "您当前上传文件大于1M，请重新上传",
          duration: 2000
        });
        this.$refs.export.value = "";
        return;
      }
      Indicator.open({
        text: "上传中...",
        spinnerType: "fading-circle"
      });
      if (
        file.name.indexOf("xlsx") != -1 ||
        file.name.indexOf("xls") != -1 ||
        file.name.indexOf("csv") != -1
      ) {
        let fd = new FormData();
        fd.append("files", file);
        fd.append("file_id", this.$route.query.url);
        console.log(this.courierUrl + "/1");
        axios({
          url: this.courierUrl + "/1",
          method: "POST",
          transformRequest: [
            data => {
              let ret = fd;
              return ret;
            }
          ],
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
          .then(res => {
            Indicator.close();
            this.$refs.export.value = "";
          })
          .catch(err => {
            console.log(err);
            Indicator.close();
            this.$refs.export.value = "";
            if (err.status == 200) {
              Toast({
                message: "追加数据成功",
                duration: 2000
              });
            }
          });
      } else {
        Toast({
          message: "请上传正确的文件",
          duration: 1000
        });
      }
    }
  },
  computed: {
    // 动态改变图片地址
    c_img() {
      return `${this.courierUrl}/${this.$route.query.QR_code}`;
    }
  },
  components: {
    Toast,
    ComHeader,
    MessageBox,
    Indicator
  }
};
</script>
<style lang="scss" scoped>
.re-box {
  width: 100%;
  height: 40px;
  padding: 5px 0px 5px 20px;
  box-sizing: border-box;
  > span:first-child {
    display: inline-block;
    height: 100%;
    line-height: 30px;
    padding-left: 5px;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
  }
  .re-box-copy {
    padding: 0 10px;
    border-radius: 3px;
    height: 100%;
    margin-left: 5px;
    line-height: 30px;
    background: #0087ff;
    text-align: center;
    color: #fff;
    margin-right: 7%;
  }
}
.space-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.text-gray {
  color: #999;
}
.btn-bxo {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0px 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  span {
    color: #fff;
    margin: 0 10px;
    border-radius: 3px;
    text-align: center;
    background: #0087ff;
  }
}
.fileName {
  position: relative;
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 0.45rem;
}
.result-box {
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  background: #fff;
  width: 90%;
  padding: 10px;
  margin: 1.8rem auto 0;
  > span {
    font-weight: 600;
    margin-bottom: 10px;
    font {
      font-weight: 300;
    }
  }
  > img {
    width: 80%;
    margin: 0 auto;
  }
  p {
    text-align: center;
  }
  .text-red {
    color: #ff0000;
  }
}
.copyBtn {
  width: 100%;
  height: 45px;
  line-height: 45px;
  background: #1973bf;
  text-align: center;
  color: #fff;
  margin: 10px 0;
  border-radius: 5px;
}
</style>


